<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>测试数据劫持</title>
	</head>
	<body>
		<h2 id="app">数据劫持</h2>
		<script>
			// 模拟 Vue 中的 data 选项
			let data = {
				msg: 'hello',
				count:0
			}
			// 模拟 Vue 的实例
			let vm = {}
			// 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
			Object.keys(data).forEach(key => {
				Object.defineProperty(vm, key, {
					// 当获取值的时候执行
					get() {
						console.log('get: ', data.msg)
						return data.msg
					},
					// 当设置值的时候执行
					set(newValue) {
						console.log('set: ', newValue)
						if (newValue === data.msg) {
							return
						}
						data.msg = newValue
						// 数据更改，更新 DOM 的值
						document.querySelector('#app').textContent = data.msg
					},
				})
			})
			// 测试
			vm.msg = 'Hello World'
			console.log(vm.msg)
		</script>
	</body>
</html>
// 可枚举（可遍历）
enumerable: true,
// 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
configurable: true,